@import "fontsize-and-color.scss";

.list-card {
  display: block;
  height: 100%;
  width: 100%;
  padding: 20px 0;
  background-color: #fff;
  transition: .5s;
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  }

  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    img {
      display: block;
      height: 160px;
      width: 160px;
      object-fit: cover;
    }

    p {
      max-width: 234px;
      padding: 0 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      &:nth-child(2) {
        margin-top: 15px;
        @include font-normal;
        color: #333;
      }

      &:nth-child(3) {
        @include font-small;
        color: $secondary-text-1st;
      }

      &:last-child {
        margin-top: 10px;
        @include font-normal;
        color: $mi-theme-color;

        span {
          color: $secondary-text-1st;
          text-decoration: line-through;
          padding-left: 8px;
        }
      }
    }
  }


}